<template>
	<view class="certification">
		<view class="form-list">
			<view class="title">房屋信息</view>
		 

			<uni-data-picker v-model="buildingId" :map="{text:'name',value:'id'}" :localdata="buildings"
				popup-title="请选择楼栋" @change="onchange" @nodeclick="onnodeclick">
				<view class="item-box">
					<view class="left">小区</view>
					<view class="right">
						<text>{{buildingChecked}}</text>
						<text class="iconfont icon-youjiantou icon"></text>
					</view>
				</view>
			</uni-data-picker>
			
			<picker v-if="buildingId>0" range-key="houseno"  @change="bindPickerChange"  :range="houses">
				<view class="item-box">
					<view class="left">楼栋房号</view>
					<view class="right">
						<text>{{housesCheck}}</text>
						<text class="iconfont icon-youjiantou icon"></text>
					</view>
				</view>
			</picker>
			
			<view v-else @click="clickHouseHandle"  class="item-box">
				<view class="left">楼栋房号</view>
				<view class="right">
					<text>请选择房间</text>
					<text class="iconfont icon-youjiantou icon"></text>
				</view>
			</view>
			
			
	<picker range-key="name"  @change="userTypePickerChange"  :range="userTypes">
			<view class="item-box">
				<view class="left">住户类型</view>
				<view class="right">
					<text>{{userTypeCheck}}</text>
					<text class="iconfont icon-youjiantou icon"></text>
				</view>
			</view>
	</picker>
			<view class="title">个人信息</view>
			<view class="item-box">
				<view class="left">姓名</view>
				<view class="right">
					<input v-model="formData.name" type="text" placeholder="请填写姓名" />
					<!-- <text class="iconfont icon-youjiantou icon"></text> -->
				</view>
			</view>
			<view class="item-box">
				<view class="left">联系电话</view>
				<view class="right">
					<input v-model="formData.mobile" type="number" placeholder="请填写手机号" />
					<!-- <text class="iconfont icon-youjiantou icon"></text> -->
				</view>
			</view>

		</view>
		<!-- 表单 结束 -->

		<view @click="submit" class="btn">提 交</view>
	</view>
</template>

<script>
	import {
		getBuildings,
		getHouseList,getUserinfoType,userinfoAdd,getCheckHouse
	} from '../../service/houses.js'
	export default {
		data() {
			return {
				buildingChecked: "请选择小区",
				 housesCheck:"请选择房间",
				 userTypeCheck:"请选择住户类型",
				buildingId: 0,
				buildings: [],
				userTypes:[],
				// housesIndex: -1,
				houses: [],
				formData: {
					photo: "",
					name: "",
					houseid: null,
					usertype: null,
					sex: null,
					mobile: "",
					usernative: "",
					cardid: "",
					nation: ""
				}
			}
		},
		onLoad() {
			this.getBuildings();
			this.getUserType();
		},
		methods: {
			async submit(){
				
				if(!this.formData.houseid){
			    	return	uni.showToast({
						icon:'none',
						title:'请选择房间号'
					})
				}
				if(!this.formData.name){
					return	uni.showToast({
						icon:'none',
						title:'请输入姓名'
					})
				}
				
				uni.showLoading({
					title:'正在提交...'
				})
				const res=await userinfoAdd(this.formData).catch(()=>undefined);
				
				if(!res) return;
				uni.hideLoading();
				
				//重新获取 访问信息 并写入本地缓存
				const houseRes=await getCheckHouse();
				if(houseRes && houseRes.list.length>0){
					 uni.setStorageSync("houses",JSON.stringify(houseRes.list));
				}
				
				
				uni.redirectTo({
					url:`/pages/house/certificationState?name=${this.formData.name}&house=${this.buildingChecked+this.housesCheck}`
				})
				
				
				
			},
			clickHouseHandle(){
				uni.showToast({
					icon:'none',
					title:'请先选择楼栋'
				})
			},
			clickHandle(e) {

				console.log("clickHandle", e);
				e.stopPropagation();

			},
			//用户类型选择
			userTypePickerChange(e){
				let userType=this.userTypes[e.detail.value];
				this.formData.usertype= userType.id;
				this.userTypeCheck=userType.name;
			},
			//选择房屋
			bindPickerChange(e) {

				// this.housesIndex = e.detail.value;
				let house=this.houses[e.detail.value]; //选择的房子
				this.housesCheck=house.houseno;

                this.formData.houseid=house.id;
			},
			async getUserType(){
				
				const res=await getUserinfoType();
				this.userTypes=res.list;
				
				
			},
			async getHouse(buildingid) {

				let params = {
					buildingid
				}

				const res = await getHouseList(params);
				console.log("房间信息", res);

				this.houses = res.list;

			},
			//选择楼栋
			onchange(e) {

			
			
			    // this.houses=[];
				this.housesCheck="请选择房间";
				this.formData.houseid=null;
				this.buildingChecked = e.detail.value.map(item => item.text).join("");

				// this.housesIndex = -1;
				this.getHouse(this.buildingId);


			},
			onnodeclick(node) {
				console.log("onnodeclick", node);
			},
			async getBuildings() {

				const res = await getBuildings();

				this.buildings = res.list;

				console.log(this.buildings);

			}
		}
	}
</script>

<style lang="less">
	.form-list {

		.title,
		.item-box {
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			height: 70rpx;
			background-color: #f0f0f0;
			font-size: 25rpx;
			line-height: 70rpx;
		}

		.item-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #f6f6f6;

			.left {
				width: 100rpx;
				font-size: 25rpx;
				color: #050505;
			}

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				font-size: 25rpx;
				color: #939393;

				.icon {
					margin-left: 5rpx;
					font-size: 30rpx;
				}

				input {
					text-align: right;
					font-size: 25rpx;
					margin-right: 40rpx;
				}
			}
		}

	}

	.btn {
		width: 510rpx;
		height: 75rpx;
		background-color: #5da5f1;
		border-radius: 35rpx;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		line-height: 75rpx;
		margin: 140rpx auto 0;
	}
</style>